<template>
    <!-- pages/vip/vip.wxml -->
    <view>
        <view v-if="vipList.length">
            <nav txtColor="#FFFFFF" image="../..https://oos-cn.ctyunapi.cn/front-end/static/back1.png" title="会员等级" :show_bol="false"></nav>
            <view class="header_bg" :style="'height:' + (widnowH <= 736 ? 180 : 210) + 'vw;'"></view>
            <view :style="'padding-top:' + (widnowH <= 568 ? bar_Height + 50 : bar_Height + 55) + 'px;'">
                <view class="instructions" :style="'top:' + (widnowH <= 568 ? bar_Height + 50 : bar_Height + 55) + 'px;'">
                    <text v-if="consumeMoney">消费{{ consumeMoney / 100 }}元获得{{ equivalentIntegral }}消费积分</text>
                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/instruction.png" class="instructions_img"></image>
                </view>
                <view class="swiper">
                    <swiper previous-margin="30rpx" next-margin="30rpx" :circular="true" :current="current" @change="bindChange">
                        <block v-for="(item, index) in vipList" :key="index">
                            <swiper-item id="swiperList" :item-id="String(item.level)">
                                <block style="color: red">
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/silver_bg.png" v-if="item.level == 1"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/gold_bg.png" v-else-if="item.level == 2"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/platinum_bg.png" v-else-if="item.level == 3"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/masonry_bg.png" v-else-if="item.level == 4"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/black_bg.png" v-else-if="item.level == 5"></image>
                                    <view class="vip_name">
                                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/silver_crown.png" class="vip_name_icon" v-if="item.level == 1"></image>
                                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/gold_crown.png" class="vip_name_icon" v-else-if="item.level == 2"></image>
                                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/platinum_crown.png" class="vip_name_icon" v-else-if="item.level == 3"></image>
                                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/masonry_crown.png" class="vip_name_icon" v-else-if="item.level == 4"></image>
                                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/black_crown.png" class="vip_name_icon" v-else-if="item.level == 5"></image>
                                        <view class="vip_type cardSilverColor" v-if="item.level == 1">银卡</view>
                                        <view class="vip_type cardGoldColor" v-else-if="item.level == 2">金卡</view>
                                        <view class="vip_type cardPlatinumColor" v-else-if="item.level == 3">白金</view>
                                        <view class="vip_type cardMasonryColor" v-else-if="item.level == 4">钻石</view>
                                        <view class="vip_type cardBlackColor" v-else-if="item.level == 5">黑金</view>
                                        <view class="vip_grade cardGradeBorder1" v-if="item.level == 1 && index == 0">当前等级</view>
                                        <view class="vip_grade cardGradeBorder2" v-else-if="item.level == 2 && index == 0">当前等级</view>
                                        <view class="vip_grade cardGradeBorder3" v-else-if="item.level == 3 && index == 0">当前等级</view>
                                        <view class="vip_grade cardGradeBorder4" v-else-if="item.level == 4 && index == 0">当前等级</view>
                                        <view class="vip_grade cardGradeBorder5" v-else-if="item.level == 5 && index == 0">当前等级</view>
                                    </view>
                                         <!--<view class="vip_time timeColor1" v-if="item.level == 1">-->
                                            <!--<view>有效期:{{ item.validityDate }}</view>-->
                                          <!--</view>-->
                                          <!--<view class="vip_time timeColor2" v-else-if="item.level == 2">-->
                                            <!--<view>有效期:{{ item.validityDate }}</view>-->
                                          <!--</view>-->
                                          <!--<view class="vip_time timeColor3" v-else-if="item.level == 3">-->
                                            <!--<view>有效期:{{ item.validityDate }}</view>-->
                                          <!--</view>-->
                                          <!--<view class="vip_time timeColor4" v-else-if="item.level == 4">-->
                                            <!--<view>有效期:{{ item.validityDate }}</view>-->
                                          <!--</view>-->
                                          <!--<view class="vip_time timeColor5" v-else-if="item.level == 5">-->
                                            <!--<view>有效期:{{ item.validityDate }}</view>-->
                                          <!--</view>-->
                                    <view class="progress" v-if="index == 0">
                                        <view class="progress-box">
                                            <progress
                                                :percent="(item.consumeIntegral / item.maxIntegral) * 100"
                                                active
                                                stroke-width="8"
                                                border-radius="9"
                                                backgroundColor="#D4D4D5"
                                                activeColor="#767676"
                                                v-if="item.level == 1"
                                            />
                                            <progress
                                                :percent="(item.consumeIntegral / item.maxIntegral) * 100"
                                                active
                                                stroke-width="8"
                                                border-radius="9"
                                                backgroundColor="#EAD4B3"
                                                activeColor="#C09A52"
                                                v-else-if="item.level == 2"
                                            />
                                            <progress
                                                :percent="(item.consumeIntegral / item.maxIntegral) * 100"
                                                active
                                                stroke-width="8"
                                                border-radius="9"
                                                backgroundColor="#E1C7B9"
                                                activeColor="#C7745D"
                                                v-else-if="item.level == 3"
                                            />
                                            <progress
                                                :percent="(item.consumeIntegral / item.maxIntegral) * 100"
                                                active
                                                stroke-width="8"
                                                border-radius="9"
                                                backgroundColor="#D5D5E5"
                                                activeColor="#8780CA"
                                                v-else-if="item.level == 4"
                                            />
                                            <progress
                                                :percent="(item.consumeIntegral / item.maxIntegral) * 100"
                                                active
                                                stroke-width="8"
                                                border-radius="9"
                                                backgroundColor="#606870"
                                                activeColor="#404347"
                                                v-else-if="item.level == 5"
                                            />
                                        </view>
                                    </view>
                                    <view class="progress_nums">
                                        <text v-if="index == 0">积分值{{ item.consumeIntegral }}</text>
                                        <text class="progress_nums_text integralColor1" v-if="item.level == 1">
                                            {{
                                                item.maxIntegral - item.consumeIntegral > 0
                                                    ? '距下一等级还需' + (item.maxIntegral - item.consumeIntegral) + '积分'
                                                    : '已到等级最大值'
                                            }}
                                        </text>
                                        <text class="progress_nums_text integralColor2" v-else-if="item.level == 2">
                                            {{
                                                item.maxIntegral - item.consumeIntegral > 0
                                                    ? '距下一等级还需' + (item.maxIntegral - item.consumeIntegral) + '积分'
                                                    : '已到等级最大值'
                                            }}
                                        </text>
                                        <text class="progress_nums_text integralColor3" v-else-if="item.level == 3">
                                            {{
                                                item.maxIntegral - item.consumeIntegral > 0
                                                    ? ' 距下一等级还需' + (item.maxIntegral - item.consumeIntegral) + '积分'
                                                    : '已到等级最大值'
                                            }}
                                        </text>
                                        <text class="progress_nums_text integralColor4" v-else-if="item.level == 4">
                                            {{
                                                item.maxIntegral - item.consumeIntegral > 0
                                                    ? ' 距下一等级还需' + (item.maxIntegral - item.consumeIntegral) + '积分'
                                                    : '已到等级最大值'
                                            }}
                                        </text>
                                        <text class="progress_nums_text integralColor5" v-else-if="item.level == 5">
                                            {{
                                                item.maxIntegral - item.consumeIntegral > 0
                                                    ? ' 距下一等级还需' + (item.maxIntegral - item.consumeIntegral) + '积分'
                                                    : '已到等级最大值'
                                            }}
                                        </text>
                                    </view>
                                </block>
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <!-- 我的特权 -->
                <view>
                    <view class="my_privilege">{{ current == 0 ? '我的特权' : '会员权益' }}</view>
                    <view class="privilege_item">
                        <block>
                            <view class="privilege_list">
                                <view class="privilege_list-item">
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/silver_rate.png" class="privilege_icon" v-if="vipList[current].level == 1"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/gold_rate.png" class="privilege_icon" v-else-if="vipList[current].level == 2"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/platinum_rate.png" class="privilege_icon" v-else-if="vipList[current].level == 3"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/masonry_rate.png" class="privilege_icon" v-else-if="vipList[current].level == 4"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/black_rate.png" class="privilege_icon" v-else-if="vipList[current].level == 5"></image>
                                    <view class="badge" v-if="vipList[current].servicePackage && vipList[current].servicePackage.rate">{{ vipList[current].servicePackage.rate / 10 }}%</view>
                                    <view class="privilege_name">服务优惠</view>
                                </view>
                                <view class="privilege_list-item2">
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/silver_reward.png" class="privilege_icon" v-if="vipList[current].level == 1"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/gold_reward.png" class="privilege_icon" v-else-if="vipList[current].level == 2"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/platinum_reward.png" class="privilege_icon" v-else-if="vipList[current].level == 3"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/masonry_reward.png" class="privilege_icon" v-else-if="vipList[current].level == 4"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/black_reward.png" class="privilege_icon" v-else-if="vipList[current].level == 5"></image>
                                    <view class="badge" v-if="vipList[current].servicePackage && vipList[current].servicePackage.reward">{{ vipList[current].servicePackage.reward / 100 }}</view>
                                    <view class="privilege_name">奖励金额</view>
                                </view>
                                <view class="privilege_list-item3">
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/silver_free.png" class="privilege_icon" v-if="vipList[current].level == 1"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/gold_free.png" class="privilege_icon" v-else-if="vipList[current].level == 2"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/platinum_free.png" class="privilege_icon" v-else-if="vipList[current].level == 3"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/masonry_free.png" class="privilege_icon" v-else-if="vipList[current].level == 4"></image>
                                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/black_free.png" class="privilege_icon" v-else-if="vipList[current].level == 5"></image>
                                    <view class="badge" v-if="vipList[current].servicePackage && vipList[current].servicePackage.freeCount">{{ vipList[current].servicePackage.freeCount }}次</view>
                                    <view class="privilege_name">免单次数</view>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
                <!-- 最终解释权归平台所有 -->
                <view class="copy_right">
                    <text>最终解释权归平台所有</text>
                </view>
            </view>
        </view>
        <view v-else>
            <nav txtColor="#18181A" image="../..https://oos-cn.ctyunapi.cn/front-end/static/back.png" title="会员等级" :show_bol="false"></nav>
            <Upgrading text="暂无内容"></Upgrading>
        </view>
    </view>
</template>

<script>
'use strict';
import nav from '../../../components/nav/nav';
import Upgrading from '../../../components/upgrading/upgrading';

// exports.__esModule = true;

var https_1 = require('./../../../api/https.js');
export default {
    components: {
        nav,
        Upgrading
    },
    data() {
        return {
            vipList: [],
            current: 0,
            equivalentIntegral: null,
            consumeMoney: null,
            widnowH: 0,
            bar_Height: 0,
            level: 0,

            servicePackage: {
                rate: '',
                reward: '',
                freeCount: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        this.servicePackageFun();
        this.memberGradeRule();
    },
    methods: {
        servicePackageFun: function () {
            var that = this;
            https_1
                .getServicePackage({})
                .then(function (res) {
                    if (res.code == 0) {
						console.log(res.data,'这是会员数据')
                        that.setData({
                            vipList: res.data
                        });
                    }
                })
                ['catch'](function (err) {
                    console.log(err);
                });
        },

        bindChange: function (e) {
            var current = e.detail.current;
            this.setData({
                current: current
            });
        },

        memberGradeRule: function () {
            var that = this;
            https_1
                .getMemberGradeRule({})
                .then(function (res) {
                    if (res.code == 0) {
                        if (res.data.integralConfig) {
                            that.setData({
                                consumeMoney: res.data.integralConfig.consumeMoney,
                                equivalentIntegral: res.data.integralConfig.equivalentIntegral
                            });
                        }
                    }
                })
                ['catch'](function (err) {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less">
@import url('./vip.less');
</style>
